<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/base.css">
	<link rel="stylesheet" href="./css/special-issue.css">
	<title>专辑</title>
	<link rel="icon" href="./img/favicon.ico">
</head>
<body>
	<div id="logincover">
		<div class="login-inter">
			<img src="./img/关闭.png" id="clo">
			<a href="login.html">去注册</a>
			<div class="row">
				<div class="cur" id="col">短信登录</div>
				<div id="col">密码登陆</div>
				<div id="col">SIM登录</div>
			</div>
			<div id="hint">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>手机号格式不正确</span>
				<span>手机号可用</span>
			</div>
			<div id="phon">
			<input placeholder="手机号">
			<div class="row">
				<div class="col-7">
					<input placeholder="请输入验证码"/>
				</div>
				<div class="col-5">
					<p>获取验证码</p>
				</div>
			</div>
			<p>登录</p>
			</div>
			<div id="pwd">
				<input placeholder="手机号/邮箱/用户名">
				<input placeholder="密码">
				<div id="sign">
						<div class="col">
							<input type="checkbox"/>
							<span>自动登录</span>
						</div>
						<div class="col">
							<span>忘记密码</span>
							<span>|</span>
							<a href="login.html">注册</a>
						</div>
				</div>
				<div id="tisi">
				<img src="./img/err.png" >
				<img src="img/ok.png" >
				<span>密码长度在5~12位</span>
				<span>密码长度符合</span>
				</div>
				<p>登录</p>
				<span>手机号或密码不正确</span>
			</div>
			<div id="SIM">
				<input placeholder="手机号">
				<p>登录</p>
				<span>温馨提示：</span>
				<span>1.“SIM登录” 是由中国移动提供的PC端安全登录服务</span>
				<span>2.输入手机号点击 “登录”，即可在手机上查看登录请求，并使用手机进行登录授权</span>
			</div>
			<div class="text">
				登录即同意<span>《咪咕用户服务协议》</span>
				和<span>《咪咕隐私权政策》</span>
			</div>
		</div>
	</div>
	<!-- 一楼 -->
	<div class="container-fluid">
	<div class="f1">
		<div class="container">
			<div class="row">
				<div class="col-1">
					<img src="./img/210928004729927_188x50_4237.png" >
				</div>
				<div class="col-7">
					<ul>
						<li><a href="#">音乐</a></li>
						<li><a href="#">现场</a></li>
						<li><a href="vip.html">
						<img src="./img/皇冠.png" >
						会员中心
						</a></li>
						<li><a href="fanxiang.html">凡响计划</a></li>
						<li><a href="#">客户端下载</a></li>
					</ul>
				</div>
				<div class="col-4">
					<input placeholder="搜索歌曲、歌手、MV">
					<img src="./img/206搜索-线性.png" >
					<div>
					<img src="img/no-login.png" >
					<div class="log_popup">
						<p><span>一</span>登录后可专享<span>一</span></p>
						<div class="row">
							<div class="col-4">
								<img src="./img/乐谱编辑.png">
								<p>试听记录同步</p>
							</div>
							<div class="col-4">
								<img src="./img/彩铃.png">
								<p>订购酷炫铃音</p>
							</div>
							<div class="col-4">
								<img src="./img/无损音质.png">
								<p>下载无损音乐</p>
							</div>
						</div>
						<div class="row">
							<div class="col-6">
								<span class="lgin">登陆</span>
								</div>
							<div class="col-6">
								<span><a href="login.html">注册</a></span>
								</div>
						</div>
					</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- 二楼 -->
	<div class="f2">
		<div class="container">
			<ul class="cur">
				<li><a href="homepage.html">首页</a></li>
				<li><a href="playlist.html">歌单</a></li>
				<li><a href="#">专辑</a></li>
				<li><a href="hot.html">榜单</a></li>
				<li><a href="singer.html">歌手</a></li>
				<li><a href="#">彩铃</a></li>
				<li><a href="hardware.html">咪咕周边</a></li>
			</ul>
			<ul>
				<li><a href="#">首页</a></li>
				<li><a href="#">演唱会</a></li>
				<li><a href="#">独家放送</a></li>
				<li><a href="#">MV</a></li>
			</ul>
		</div>
	</div>
	</div>
	<!-- 三楼 -->
	<div class="f3">
		<div class="container">
			<div class="box">
			<div id="imgbox">
				<img src="./img/211222111809819_1000x313_4997.jpg">
				<img src="./img/211224091845840_1000x313_1734.jpg">
				<img src="./img/211230133429380_1000x313_3599.jpg">
				<img src="./img/211231164251341_1000x313_901.jpg">
				<img src="./img/220118161425333_1000x313_9056.jpg">
				<img src="./img/220124180929405_1000x313_2181.jpg">
			</div>
				<div id="leftbtn">&lt;</div>
				<div id="rightbtn">&gt;</div>
			<ul>
				<li data-dg='0' class="cur"></li>
				<li data-dg='60'></li>
				<li data-dg='120'></li>
				<li data-dg='180'></li>
				<li data-dg='240'></li>
				<li data-dg='300'></li>
			</ul>
			</div>
		</div>
	</div>
	<!-- 四楼 -->
	<div class="f4">
		<div class="container">
			<p>数字专辑</p>
			<div class="row">
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="img/AM8f4cdb709cddf9b19872c1082132d0fb.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2022-01-25</span>
					</div>
					<p class="name">冒险</p>
					<p class="author">弗拉基米尔</p>
					<div class="price">
						<span>￥3</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="img/AM936abb19075d453619601e611f02a37e.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2022-01-25</span>
					</div>
					<p class="name">不真实场景</p>
					<p class="author">庆怜</p>
					<div class="price">
						<span>￥5</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM6bad0bc942196d944b7a277aea3e9636.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2022-01-9</span>
					</div>
					<p class="name">Make it better</p>
					<p class="author">SNH48许杨玉豚</p>
					<div class="price">
						<span>￥3</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMcd40b8e1da022fd6150d0d732b6b7100.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2021-12-31</span>
					</div>
					<p class="name">"想象"跨年音乐会（上半..</p>
					<p class="author">朝简 / 窦唯</p>
					<div class="price">
						<span>￥30</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMf36629eb594f757d275fbea31e23ea60.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2021-12-07</span>
					</div>
					<p class="name">倒塌的新建筑</p>
					<p class="author">弗拉基米尔</p>
					<div class="price">
						<span>￥2</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMddc605ad586a327c119855ec3e94adb3.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2021-12-30</span>
					</div>
					<p class="name">GIFT</p>
					<p class="author">吴宣仪</p>
					<div class="price">
						<span>￥6</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM08e8f315c4c6111b2dd1c8abcdf162ac.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2021-12-31</span>
					</div>
					<p class="name">日心说 The Heliocentrism</p>
					<p class="author">陈立农</p>
					<div class="price">
						<span>￥25</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMc066b44dff09104dbbe7bc73b0a3b273.jpg" >
						<span class="tit">数字专辑</span>
						<span class="time">2021-12-23</span>
					</div>
					<p class="name">学友 经典 世界巡回演唱会</p>
					<p class="author">张学友</p>
					<div class="price">
						<span>￥3</span>
						<span>立刻购买</span>
					</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- 五楼 -->
	<div class="f5">
		<div class="container">
			<p>新碟上架</p>
			<div class="row">
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="img/AM47fa1acea19dc12336ee2c52f57dcd8b.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-30</span>
					</div>
					<p class="name">五月天 好好好想见到你 Mayda</p>
					<p class="author">五月天</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM26ff330280dcec5fd0ee0c77e6297cde.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-29</span>
					</div>
					<p class="name">我，就是中国</p>
					<p class="author">胡彦斌</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMfc055b8e1cbab5d58e19532e4bf77ff4.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-29</span>
					</div>
					<p class="name">人世间</p>
					<p class="author">雷佳</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMe2784cc6498ca7422c289eabf3d1d000.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-29</span>
					</div>
					<p class="name">新年暖洋洋</p>
					<p class="author">宝石Gem</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM3b89097152a3bc4743ea0aad7dcbb8c6.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-28</span>
					</div>
					<p class="name">时光音乐会 第14期</p>
					<p class="author">时光音乐会</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMb6b49ad16b013e9a0853d290b9edc707.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-28</span>
					</div>
					<p class="name">TWO MARIMBAS IN BERLIN</p>
					<p class="author">DoubleBeats</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMc6c2ad29ff8996b31ab6d853c27a3b92.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-28</span>
					</div>
					<p class="name">梦里啥都有之不做梦也能有</p>
					<p class="author">洛天依 / 腾格尔</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM6e25d5018c1bffbc41ee95907979dd3a.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-28</span>
					</div>
					<p class="name">西风的话+歌</p>
					<p class="author">罗大佑</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM1fe03954b5b7cf58ca1664cfbf552ce9.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-28</span>
					</div>
					<p class="name">没有什么是听戏解决不了的</p>
					<p class="author">今晚打老虎 / 赖美云</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM1627aa1f18979748d5ad2791da680820.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-27</span>
					</div>
					<p class="name">《淘金》影视原声带</p>
					<p class="author">阿云嘎 / 丁冠森 / 上白 </p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMa1223f650cd1df46b438e10edd3f5cd3.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-21</span>
					</div>
					<p class="name">我们都是运动员</p>
					<p class="author">王晰 / 吴奇 / ZJ沙楠杰 </p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMb846e6b82f1cfe767ff7ccf4a51f6b6c.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-27</span>
					</div>
					<p class="name">向前跑</p>
					<p class="author">周笔畅</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMa348858f22faf7525a6b7ac0df8419fa.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-27</span>
					</div>
					<p class="name">出场（中国冰雪 音乐专辑）</p>
					<p class="author">周深</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AM404ad3de20810328db18c3af89a912ca.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-27</span>
					</div>
					<p class="name">男二号</p>
					<p class="author">薛之谦</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMf9af60ab4aafac40d43fad3b49cb87d1.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-26</span>
					</div>
					<p class="name">偷回忆的人</p>
					<p class="author">齐秦</p>
					</div>
				</div>
				<div class="col">
					<div class="box">
						<div class="img">
						<img src="img/8e09ec01529ead4b.png" >
						<img src="./img/btn-play.png">
						</div>
						<span></span>
					<div class="imgbox">
						<img src="./img/AMc7ad9fea6b7dd5050efe4f8fe09a2479.jpg" >
						<span class="tit">咪咕畅听</span>
						<span class="time">2022-01-26</span>
					</div>
					<p class="name">燃</p>
					<p class="author">郁可唯 / 谭维维 / 胡彦斌</p>
					</div>
				</div>

			</div>
		</div>
	</div>
	<!-- 六楼 -->
	<div class="f6">
		<div class="container">
			<div class="row">
				<div class="col-9">
					<div class="row">
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕文化</a></li>
								<li><a href="#">咪咕文化官网</a></li>
								<li><a href="#">咪咕音乐简介</a></li>
								<li><a href="#">服务协议</a></li>
								<li><a href="#">隐私权政策</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">咪咕音乐家族</a></li>
								<li><a href="#">圈子彩铃</a></li>
							</ul>
						</div>
						<div class="col-4">
							<ul>
								<li><a href="#">联系我们</a></li>
								<li><a href="#">业务合作</a></li>
								<li><a href="#">常见问题</a></li>
							</ul>
						</div>
					</div>

				<img src="./img/201012095135561_48x48_9661.png" >
				</div>
				<div class="col-3">
					<p>咪咕客户端</p>
					<div class="row">
						<div class="col-6">
							<img src="./img/20101209435723_300x300_1190.png" >
							<p>咪咕音乐</p>
						</div>
						<div class="col-6">
							<img src="img/201012094413724_300x300_8080.png" >
							<p>咪咕视频</p>
						</div>
					</div>
				</div>
				<div class="ending">
					<div class="span">
					<span>蜀ICP备15012512号</span>
					<span>川网文[2019]2118-124</span>
					<span>网络视听许可证0112648号1</span>
					<span>增值业务许可证A2.B1.B2-2010000</span>
					<span>川公网安备 51010702002209号</span>
					</div>
					<p>Copyright © 2005 - 2022 咪咕音乐有限公司</p>
				</div>
			</div>
		</div>
	</div>
	<script src="jquery-3.6.0.js"></script>
	<script>
	var i=0
	let l=0
	var timer=setInterval(()=>{
		i+=60
		l++
		if(l>=6){
			l=0
		}
		imgbox.style=`transform: rotateY(${i}deg)`
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
	},5000)
	leftbtn.onclick=()=>{
		i-=60
		l--
		if(l<0){
			l=5
		}
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
		imgbox.style=`transform: rotateY(${i}deg);`
	}
	rightbtn.onclick=()=>{
		i+=60
		l++
		if(l>=6){
			l=0
		}
		imgbox.style=`transform: rotateY(${i}deg)`
		$('.f3 ul').children(`:eq(${l})`).prop('class','cur').siblings().prop('class','')
	}
	$('.f3 ul').on('mouseover','li',function(){
		$(this).prop('class','cur')
		$(this).siblings().prop('class','')
		const dg=$(this).data().dg
		imgbox.style=`transform: rotateY(${dg}deg)`
	})
	$('.container-fluid').on('mouseover','a',function(){
			if($(this).text()=='现场'){
				$('.f2 ul:last-child').prop('class','cur').siblings().prop('class','')
			}
			if($(this).text()=='音乐'){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
			}
		})
		$('.container-fluid').mouseleave(function(){
				$('.f2 ul:first-child').prop('class','cur').siblings().prop('class','')
		})
		// 登陆
		$('.f1 .container>.row>.col-4>div').mouseover(function(){
			$('.f1 .log_popup').stop(true).show(300)
		})
		$('.f1 .container>.row>.col-4>div').mouseleave(function(){
			$('.f1 .log_popup').stop(true).hide(300)
		})
		const lgin=document.querySelector('.lgin')
		lgin.onclick=()=>{
				logincover.style=`display: flex;`
			}
			clo.onclick=()=>{
				logincover.style=`display: none;`
			}
			$('.login-inter>div>input:first-child').on('input',function(){
					if($(this).val()==''){
						$('#hint').prop('class','')
						return
					}
				if(/^1[3-9]\d{9}$/.test($(this).val())){
					$('#hint').prop('class','ok')
				}else{
					$('#hint').prop('class','err')
				}
			})
			$('.login-inter>div>input:first-child').blur(function(){
				$('#hint').prop('class','')
			})
			$('#pwd>input:nth-of-type(2)').on('input',function(){
				const l=$(this).val()
				if(l==''){
					$('#tisi').prop('class','')
					return
				}
				if(l.length>12 || l.length<5){
					$('#tisi').prop('class','err')
				}else{
					$('#tisi').prop('class','ok')
				}
			})
			$('#pwd>input:nth-of-type(2)').blur(function(){
				$('#tisi').prop('class','')
			})
			// $('#pwd>p').click(function(){
			// 	let p=$('#pwd>input:first-child').val()
			// 	let w=$('#pwd>input:nth-of-type(2)').val()
			// 	let xhr=new XMLHttpRequest()
			// 	xhr.open('get','/v1/log/lg?phone='+p+'&pwd='+w)
			// 	xhr.send()
			// 	xhr.onload=()=>{
			// 		console.log(xhr.responseText)
			// 		if(xhr.responseText=='err'){
			// 			$('#pwd>span').prop('class','err')
			// 		}
			// 	}
			// })
			$('.login-inter>.row').on('click','div',function(){
				$(this).addClass('cur').siblings().removeClass('cur')
				if($(this).text()=='短信登录'){
					phon.style.display=''
					pwd.style.display='none'
					SIM.style.display='none'
				}
				if($(this).text()=='密码登陆'){
					phon.style.display='none'
					pwd.style.display='block'
					SIM.style.display='none'
				}
				if($(this).text()=='SIM登录'){
					phon.style.display='none'
					pwd.style.display='none'
					SIM.style.display='block'
				}
			})
	</script>
</body>
</html>
